<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Profile</title>

<style>
#txtCurrentType, #txtCurrentValue, #txtNewValue{
	height: 35px;
	cursor: not-allowed;
	background-color: silver;
	font-size: 14px;
	line-height: 1.428571429;
	color: #555;
	vertical-align: middle;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border-color ease-in-out .15s, box-shadow
		ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}
</style>
</head>
<body class="skin-blue">
        <!-- header logo: style can be found in header.less -->
        <%@include file="Head-Banner.jsp" %>
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <%@include file="Left-Banner.jsp" %>
            <!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">                
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        	Profile Management
                    </h1>
                </section>
                <!-- Main content -->
                <section class="content">
            <div style="display: block">
            	<div class="bg-gray"
				style="background-color: #444444; float: left; width: 100px">
					<a href=""><button type="button" class="btn bg-olive btn-block">Accept</button></a>
				</div>
				<div class="footer bg-gray"
				style="background-color: #444444; float: left; width: 115px;padding-left: 15px;">
					 <a href="profile.jsp"><button type="button" class="btn bg-olive btn-block" style="">Back</button> </a>
				</div>	
			</div>
			
                    <div class="form-box" id="">
                        <form action="" id="upgradeForm" method="post">
                            <div class="body bg-gray">
                            	<div class="form-group">
                                    <label>Username:</label>
                                    <input style="text-align: center;" id="txtUsername" name="txtUsername" type="text" class="form-control" value="Truonglba" readonly="true">
                                </div> 
                                <div class="form-group">
                                    <label>Current Type:</label>
                                    <div style="display: block;">
                                    	<input style="float: left;text-align: center;" id="txtCurrentType" name="txtCurrentType" type="text" class="" value="Basic" readonly>
                                    	<input style="float: right;text-align: center;" id="txtCurrentValue" name="txtCurrentValue" type="text" class="" value="100 MB" readonly>
                                	</div>
                                </div>
                                <div class="form-group" style="padding-top: 20px;">
                                    <label>New Type:</label>
                                    <div style="display: block;">
                                    	<select id="type" class="form-control" style="text-align:center;float: left;width: 147px;height: 35px;font-size: 13px" onchange="calculateType()">
                                                <option value="basic">Basic</option>
                                                <option value="silver">Silver</option>
                                                <option value="gold">Gold</option>
                                            </select>
                                    	<input style="float: right;text-align: center;" id="txtNewValue" name="txtNewValue" type="text" class="" value="100 MB" readonly>
                                	</div>
                                </div>
                             <br>
                            </div>
                        </form>
                    </div>
                    
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->
    </body>
    <script>
    	
        var type = new Array();
        type["choose"]=0;
        type["basic"]=100;
        type["silver"]=300;
        type["gold"]=700;
        
        function getType()
        {
            var amount = 0;

            var theForm = document.forms["upgradeForm"];

            var selectedType = theForm.elements["type"];

            amount = type[selectedType.value];

            return amount;
        }

        function calculateType(){
        	if(getType() == 100){
                document.getElementById('txtNewValue').value = "100 MB";
            }else if(getType() == 300){
            	document.getElementById('txtNewValue').value = "300 MB";
            }else if(getType() == 700){
            	document.getElementById('txtNewValue').value = "700 MB";
            }else{
            	document.getElementById('txtNewValue').value = "";
            } 	
        }
    </script>
</html>